<h1><code ng:non-bindable="">orderBy</code>
<span class="hint">(filter in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><a href="http://github.com/angular/angular.js/edit/master/src/ng/filter/orderBy.js"
        class="improve-docs btn btn-primary">Improve this doc</a>

    <h2 id="Description">Description</h2>

    <div class="description">
        <div class="ng-filter-page ng-filter-orderby-page"><p>Orders a specified <code>array</code> by the <code>expression</code>
            predicate.</p>

            <p>Note: this function is used to augment the <code>Array</code> type in Angular expressions. See
                <a href="api/ng.$filter"><code>ng.$filter</code></a> for more informaton about Angular arrays.</p></div>
    </div>
    <h2 id="Usage">Usage</h2>

    <div class="usage">
        <pre class="prettyprint linenums">filter:orderBy(array, expression[, reverse]);</pre>
        <h3 id="Parameters">Parameters</h3>
        <ul class="parameters">
            <li><code ng:non-bindable="">array – {Array} – </code>

                <div class="ng-filter-page ng-filter-orderby-page"><p>The array to sort.</p></div>
            </li>
            <li><code ng:non-bindable="">expression – {function(*)|string|Array.&lt;(function(*)|string)&gt;} – </code>

                <div class="ng-filter-page ng-filter-orderby-page"><p>A predicate to be
                    used by the comparator to determine the order of elements.</p>

                    <p>Can be one of:</p>

                    <ul>
                        <li><code>function</code>: Getter function. The result of this function will be sorted using the
                            <code>&lt;</code>, <code>=</code>, <code>&gt;</code> operator.
                        </li>
                        <li><code>string</code>: An Angular expression which evaluates to an object to order by, such as
                            'name'
                            to sort by a property called 'name'. Optionally prefixed with <code>+</code> or
                            <code>-</code> to control
                            ascending or descending sort order (for example, +name or -name).
                        </li>
                        <li><code>Array</code>: An array of function or string predicates. The first predicate in the
                            array
                            is used for sorting, but when two items are equivalent, the next predicate is used.
                        </li>
                    </ul>
                </div>
            </li>
            <li><code ng:non-bindable="">reverse<i>(optional)</i> – {boolean=} – </code>

                <div class="ng-filter-page ng-filter-orderby-page"><p>Reverse the order the array.</p></div>
            </li>
        </ul>
        <h3 id="Returns">Returns</h3>

        <div class="returns"><code ng:non-bindable="">{Array}</code>
            –
            <div class="ng-filter-page ng-filter-orderby-page"><p>Sorted copy of the source array.</p></div>
        </div>
    </div>
    <h2 id="Example">Example</h2>

    <div class="example">
        <div class="ng-filter-page ng-filter-orderby-page"><h4>Source</h4>

            <div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-208"
                 source-edit-css="" source-edit-js="script.js-207" source-edit-unit=""
                 source-edit-scenario="scenario.js-209"></div>
            <div class="tabbable">
                <div class="tab-pane" title="index.html">
                    <pre class="prettyprint linenums" ng-set-text="index.html-208"
                         ng-html-wrap=" angular.js script.js"></pre>
                    <script type="text/ng-template" id="index.html-208">

                        <div ng-controller="Ctrl">
                            <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>
                            <hr/>
                            [ <a href="" ng-click="predicate=''">unsorted</a> ]
                            <table class="friend">
                                <tr>
                                    <th><a href="" ng-click="predicate = 'name'; reverse=false">Name</a>
                                        (<a href ng-click="predicate = '-name'; reverse=false">^</a>)
                                    </th>
                                    <th><a href="" ng-click="predicate = 'phone'; reverse=!reverse">Phone Number</a>
                                    </th>
                                    <th><a href="" ng-click="predicate = 'age'; reverse=!reverse">Age</a></th>
                                </tr>
                                <tr ng-repeat="friend in friends | orderBy:predicate:reverse">
                                    <td>{{friend.name}}</td>
                                    <td>{{friend.phone}}</td>
                                    <td>{{friend.age}}</td>
                                </tr>
                            </table>
                        </div>
                    </script>
                </div>
                <div class="tab-pane" title="script.js">
                    <pre class="prettyprint linenums" ng-set-text="script.js-207"></pre>
                    <script type="text/ng-template" id="script.js-207">
                        function Ctrl($scope) {
                        $scope.friends =
                        [{name:'John', phone:'555-1212', age:10},
                        {name:'Mary', phone:'555-9876', age:19},
                        {name:'Mike', phone:'555-4321', age:21},
                        {name:'Adam', phone:'555-5678', age:35},
                        {name:'Julie', phone:'555-8765', age:29}]
                        $scope.predicate = '-age';
                        }
                    </script>
                </div>
                <div class="tab-pane" title="End to end test">
                    <pre class="prettyprint linenums" ng-set-text="scenario.js-209"></pre>
                    <script type="text/ng-template" id="scenario.js-209">
                        it('should be reverse ordered by aged', function() {
                        expect(binding('predicate')).toBe('-age');
                        expect(repeater('table.friend', 'friend in friends').column('friend.age')).
                        toEqual(['35', '29', '21', '19', '10']);
                        expect(repeater('table.friend', 'friend in friends').column('friend.name')).
                        toEqual(['Adam', 'Julie', 'Mike', 'Mary', 'John']);
                        });

                        it('should reorder the table when user selects different predicate', function() {
                        element('.doc-example-live a:contains("Name")').click();
                        expect(repeater('table.friend', 'friend in friends').column('friend.name')).
                        toEqual(['Adam', 'John', 'Julie', 'Mary', 'Mike']);
                        expect(repeater('table.friend', 'friend in friends').column('friend.age')).
                        toEqual(['35', '10', '29', '19', '21']);

                        element('.doc-example-live a:contains("Phone")').click();
                        expect(repeater('table.friend', 'friend in friends').column('friend.phone')).
                        toEqual(['555-9876', '555-8765', '555-5678', '555-4321', '555-1212']);
                        expect(repeater('table.friend', 'friend in friends').column('friend.name')).
                        toEqual(['Mary', 'Julie', 'Adam', 'Mike', 'John']);
                        });
                    </script>
                </div>
            </div>
            <h4>Demo</h4>

            <div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-208"
                 ng-eval-javascript="script.js-207"></div>
        </div>
    </div>
</div>
